<template>
  <div>
    <el-row>
      <div style="margin: 10px">
        <el-col :span="7">
          <el-card class="box-card" style="overflow:auto;margin-right: 10px; height: 650px" v-infinite-scroll="load">
            <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
                     :props="{ label: 'name', children: 'pdCoreOrgVoList' }">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-button type="text" size="mini" @click="() => queryAddress(data)" v-if="data.orgType ==4">
                    查看区域
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-card>
        </el-col>

        <el-col :span="17">
          <el-card class="box-card" style="height: 650px">
            <div id="mapContainer"></div>
          </el-card>
        </el-col>
      </div>


    </el-row>

  </div>
</template>

<script>
import axios from "axios";
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  data() {
    return {
      data: [],//树状图数据
      district: [116.22961266775826,39.911353808778294],
    }

  },
  created() {
    this.queryCoreOrgList();

  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: 'aa26195143721cc58d20294c8e672ed8' // 申请key对应的秘钥
    }
    //DOM初始化完成进行地图初始化
    this.initMap();

  },
  methods: {

    // 查看地区
    async queryAddress(data) {
      this.district[1] = data.latitude;
      this.district[0] = data.longitude;
      this.initMap();
    },
    // 地图加载
    initMap() {
      AMapLoader.reset()
      AMapLoader.load({
        key: "107b7f4763513ea26105a82ea6820c5c",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("mapContainer", {  //设置地图容器id
          viewMode: "3D",    //是否为3D地图模式
          center: this.district, //初始化地图中心点位置
        });
        function addPolygon(data, map) {
          var circle = new AMap.Circle({
            center: data,
            radius: 10000, //半径
            fillColor: '#1791fc',
            zIndex: 50,
          })
          map.add(circle);
          // 缩放地图到合适的视野级别
          map.setFitView([circle])

        }
        addPolygon(this.district, this.map);
      }).catch(e => {
        console.log(e);
      })
    },
    load() {
      this.count += 2
    },
    //查询机构
    async queryCoreOrgList() {
      let result = await axios.get("/api/pd-aggregationcjj/pd-core-org/queryCoreOrgList");
      this.data = result.data.data;

    },


  }
}
</script>

<style scoped>

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

#mapContainer {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
